<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .h-60 {
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row align-items-center h-60">
            <h1 class="col-2">LOGO</h1>
            <h5 class="col-3">学生信息管理系统</h5>
            <button type="button" class="col-1 btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                    id="add">
                添加信息
            </button>
        </div>
        <div class="row my-5">
            <table class="table table-striped table-hover table-sm">
                <thead>
                    <tr>
                        <th width="60">序号</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>成绩</th>
                        <th width=180>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="row justify-content-center">
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off">
                        <div class="form-group row">
                            <label for="stuId" class="col-sm-2 col-form-label">学号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="stuId">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="stuName" class="col-sm-2 col-form-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="stuName">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="result" class="col-sm-2 col-form-label">成绩</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="result">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal" id="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="request.js"></script>
<script src="js/index.js"></script>
</html>